import React, { useState, useEffect } from 'react'
import Header from '../../components/Header/Header'
import Banner from './components/Banner/Banner'
import New from './components/New/New'
import Groupon from './components/Groupon/Groupon'
import Seckill from './components/Seckill/Seckill'
import IndexGoods from './components/IndexGoods/IndexGoods'
import { reqgetbanner, reqgetgroupon, reqgetindexgoods, reqgetnew, reqgetseckill } from '../../http/api'


const Home = () => {
  const [banner, setBanner] = useState([])
  const [newList, setnewList] = useState([])
  const [groupon, setGroupon] = useState([])
  const [seckill, setSeckill] = useState([])
  const [indexGoods, setIndexGoods] = useState([])
  const [n, setN] = useState(0)

  useEffect(() => {
    reqgetbanner().then(res => {
      if (res.data.code === 200) {
        setBanner(res.data.list)
      }
    })
    reqgetnew().then(res => {
      if (res.data.code === 200) {
        setnewList(res.data.list)
      }
    })
    reqgetgroupon().then(res => {
      if (res.data.code === 200) {
        setGroupon(res.data.list)
      }
    })
    reqgetseckill().then(res => {
      if (res.data.code === 200) {
        setSeckill(res.data.list)
      }
    })
    reqGoodsList(n)
  }, [])
  const reqGoodsList = n => {
    setN(n)
    reqgetindexgoods().then(res => {
      if (res.data.code === 200) {
        setIndexGoods(res.data.list[n].content)
      }
    })
  }
  return (
    <div>
      <Header title="首页"></Header>
      <Banner banner={banner}></Banner>
      <New newList={newList}></New>
      <Groupon groupon={groupon}></Groupon>
      <Seckill seckill={seckill}></Seckill>
      <IndexGoods indexGoods={indexGoods} changen={n => reqGoodsList(n)}></IndexGoods>
    </div>
  )
}


export default Home